<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="javascript" src="js/jquery-1.11.0.js"></script>
        <script type="javascript" src="js/slider.js"></script>
        <title>响应式页面布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body, html {
                height: 100%;
            }

            body {
                font-size: 12px;
                color: #333;
                background-color: #f3f3f3;
            }

            a {
                color: #333;
                text-decoration: none;
            }

            header {
                height: 90px;
                display: flex;
                position: sticky;
                top: 0;
                align-items: center;
                background-color: #fff;
            }

            header section {
                width: 80%;
                height: 90px;
                margin: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            header section img:first-child {
                height: 54px;
            }

            header nav {
                width: 60%;
                display: flex;
                justify-content: space-between;
            }

            header nav a:hover {
                text-decoration: underline;
            }

            #btns {
                display: none;
                cursor: pointer;
            }

            main {
                background-color: #eee;
                padding-top: 10px;
            }

            .body-1 {
                width: 80%;
                margin: auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }

            .body-1 figure {
                width: 24%;
                height: 300px;
                margin-bottom: 10px;
                text-align: center;
                background: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: all .5s;
            }

            .body-1 figure:hover {
                transform: translateY(-5px);
                box-shadow: 0 0 20px 5px #AAA;
            }

            .body-1 figure:hover h2 {
                color: #f99;
            }

            .body-1 figure img {
                width: 92px;
                height: 110px;
                margin-bottom: 20px;
            }

            .body-2 {
                width: 80%;
                margin: auto;
                text-align: center;
                padding-top: 20px;
            }

            .body-2 div {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .body-2 div ol {
                width: 32%;
                height: 200px;
                display: flex;
                margin-top: 10px;
                box-sizing: border-box;
                flex-direction: column;
                background: #fff;
                padding: 0 10px 10px 0;
                justify-content: space-around;
            }

            .body-2 div ol li {
                width: 100%;
                list-style: none;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            li p span:nth-of-type(1) {
                width: 8px;
                height: 8px;
                display: inline-block;
                background: #1629bf;
            }

            li span:last-child {
                font-size: 12px;
                white-space: nowrap;
            }

            main p {
                width: 70%;
                height: 20px;
                box-sizing: border-box;
                align-self: flex-start;
                line-height: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }

            #box {
                height: 100%;
                width: 100%;
                background: black;
                position: absolute;
                top: 0;
                right: -100%;
                z-index: 3;
                transition: all 0.5s;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
            }

            #box a {
                line-height: 52px;
                color: #fff;
                text-align: center;
                font-size: 18px;
                cursor: pointer;
            }

            #box a:hover {
                background-color: #FF9999;
                color: #fff;
                align-self: stretch;
            }

            /*PC端*/
            /*@media screen {
                
            }*/

            /*移动端*/
            @media screen and (max-width: 800px) {
                header section nav {
                    display: none;
                }

                #btns {
                    display: block;
                }

                .body-1 figure {
                    width: 32%;
                }

                .body-2 div ol {
                    width: 100%;
                }
            }

            @media screen and (max-width: 600px) {
                .body-1 figure {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <header>
            <section>
                <img src="img/logo.png" alt="" title="千峰">
                <nav>
                    <a href="#">首页</a>
                    <a href="#">走进前锋</a>
                    <a href="#">走进前锋</a>
                    <a href="#">走进前锋</a>
                    <a href="#">走进前锋</a>
                    <a href="#">走进前锋</a>
                </nav>
                <img src="img/menu.png" alt="" id="btns">
            </section>
        </header>
        <main>
            <section class="body-1">
                <figure>
                    <img src="img/h5_ico.png" alt="">
                    <figcaption><h2>H5大前端</h2></figcaption>
                </figure>
                <figure>
                    <img src="img/h5_ico.png" alt="">
                    <figcaption><h2>H5大前端</h2></figcaption>
                </figure>
                <figure>
                    <img src="img/h5_ico.png" alt="">
                    <figcaption><h2>H5大前端</h2></figcaption>
                </figure>
                <figure>
                    <img src="img/h5_ico.png" alt="">
                    <figcaption><h2>H5大前端</h2></figcaption>
                </figure>
                <figure>
                    <img src="img/h5_ico.png" alt="">
                    <figcaption><h2>H5大前端</h2></figcaption>
                </figure>
                <figure>
                    <img src="img/h5_ico.png" alt="">
                    <figcaption><h2>H5大前端</h2></figcaption>
                </figure>
                <figure>
                    <img src="img/h5_ico.png" alt="">
                    <figcaption><h2>H5大前端</h2></figcaption>
                </figure>
                <figure>
                    <img src="img/h5_ico.png" alt="">
                    <figcaption><h2>H5大前端</h2></figcaption>
                </figure>
            </section>
            <section class="body-2">
                <h2>最新资讯</h2>
                <div>
                    <ol>
                        <li>
                            <p><span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                    </ol>
                    <ol>
                        <li>
                            <p><span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                    </ol>
                    <ol>
                        <li>
                            <p><span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                        <li>
                            <p>
                                <span></span>今年是中国人民志愿军抗美援朝出国作战70周年 | 抗美援朝保家卫国 | 中国人民志愿军以坚强、无畏、勇敢谱写气壮山河的英雄赞歌</p>
                            <span>2020-10-19</span>
                        </li>
                    </ol>
                </div>
            </section>
        </main>
        <div id="box">
            <a href="#">首页</a>
            <a href="#">列表1</a>
            <a href="#">列表2</a>
            <a href="#">列表3</a>
            <a href="#">列表4</a>
            <a href="#">列表5</a>
        </div>
    </body>
    <script>
        window.onload = function () {

            let btn = document.getElementById("btns");
            let box = document.querySelector("#box");
            btn.onclick = function (r) {
                box.style.right = "0";
            }
            box.onclick = function () {
                box.style.right = "-100%";
            }
        }
    </script>
</html>